<template>
    <div>
        <!--增加或更新的表单弹窗-->
        <div style="text-align: left; margin: 10px">
            <el-button size="mini" type="primary" @click="toAdd">
                添加
            </el-button>

        </div>

        <!--增加或更新的表单弹窗-->
        <el-dialog :title=formTitle :visible.sync="formDialogVisible">
            <el-form ref="form" :model="formData" :rules="rules" size="large" label-width="200px">
                <el-form-item label="商品标题" prop="goodsTitle">
                    <el-input maxlength="20" v-model="formData.goodsTitle" placeholder="商品标题"></el-input>
                </el-form-item>
                <el-form-item label="总价格(单位:分)" prop="goodsPrice">
                    <el-input type="number" v-model="formData.goodsPrice" placeholder="总价格"></el-input>
                </el-form-item>
                <el-form-item label="水票单价(单位:分)" prop="ticketPrice">
                    <el-input type="number" v-model="formData.ticketPrice" placeholder="水票单价"></el-input>
                </el-form-item>
                <el-form-item label="商品描述" prop="description">
                    <el-input maxlength="30" v-model="formData.description" placeholder="商品描述"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button type="primary" @click="handelConfirm">确定</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <!--列表-->
        <div style="margin: 0px 10px;text-align: left;">
            <el-table
                    :data="ticketGoodss"
                    stripe
                    :default-sort="{prop: 'goodsPrice', order: 'ascending'}">

                <el-table-column prop="goodsTitle" label="商品标题" sortable></el-table-column>
                <el-table-column prop="goodsPrice" label="总价格" sortable>
                    <template slot-scope="scope">
                        ￥{{scope.row.goodsPrice / 10}}
                    </template>
                </el-table-column>
                <el-table-column prop="ticketPrice" label="水票单价" sortable>
                    <template slot-scope="scope">
                        ￥{{scope.row.ticketPrice / 10}}
                    </template>
                </el-table-column>
                <el-table-column prop="description" label="商品描述" show-overflow-tooltip></el-table-column>

                <!-- 可选的状态改变器-->
                <el-table-column label="上架状态">
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.sellStatus"
                                active-color="green"
                                inactive-color="red"
                                @change="(value) => commitStatusChange(value, scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>

                <el-table-column label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button @click="toEdit(scope.row)" type="text" size="mini">编辑</el-button>
                        <el-button @click="toDelete(scope.row.id)" type="text" size="mini">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
    </div>
</template>

<script>
    import {
        listTicketGoods,
        addTicketGoods,
        deleteTicketGoodsById,
        getTicketGoodss,
        updateTicketGoods
    } from "@/api/modules/app/ticketGoodsApi.js";

    export default {
        name: "ticketGoodsComponent",
        data() {
            return {
                // 查询参数
                searchParams: {
                },
                ticketGoodss: [],
                formDialogVisible: false,
                formTitle: '添加',
                formData: {
                    id: null, goodsTitle: null, goodsPrice: null, ticketPrice: null,sellStatus: true, description: null
                },
                rules: {
                    goodsTitle: [
                        {required: true, message: '商品标题不能为空', trigger: 'blur'}
                    ], goodsPrice: [
                        {required: true, message: '总价格不能为空', trigger: 'blur'}
                    ], ticketPrice: [
                        {required: true, message: '水票单价不能为空', trigger: 'blur'}
                    ]
                }
            }
        },
        mounted() {
            this.getTicketGoodss()
        },
        methods: {
            // 获取数据
            getTicketGoodss() {
                let that = this;
                listTicketGoods().then(result => {
                    that.ticketGoodss = result.data;
                })
            },
            // 切换页数
            changePageNo(pageNo) {
                this.searchParams.pageNo = pageNo;
            },
            // 改变页面大小
            changePageSize(pageSize) {
                this.searchParams.pageSize = pageSize;
            },
            // 清除查询参数
            clearSearchParams() {
                this.searchParams.searchParam1 = null;
            },
            // 重置表单
            resetForm() {
                // 手动重置 不然数据被绑定在toEdit时深克隆出来的对象
                this.formData = {
                    id: null, goodsTitle: null, goodsPrice: null, ticketPrice: null, description: null
                }
            },
            // 增加
            toAdd() {
                this.resetForm()
                this.formDialogVisible = true
                this.formTitle = '添加'
            },
            // 删除
            toDelete(id) {
                let that = this;
                this.$confirm("提示", "是否删除", {}).then(() => {
                    deleteTicketGoodsById(id).then(() => {
                        this.$notify.success("删除成功");
                        that.getTicketGoodss();
                    })
                }).catch(() => {
                })
            },
            // 编辑
            toEdit(selectedTicketGoods) {
                // 深拷贝一个对象 不然在表格显示的数据会受到印象
                this.formData = JSON.parse(JSON.stringify(selectedTicketGoods))
                this.formDialogVisible = true
                this.formTitle = '更新'
            },
            // 提交表单
            handelConfirm() {
                this.$refs['form'].validate(valid => {
                    console.log(this.formTitle)
                    if (!valid)
                        return

                    this.formDialogVisible = false;
                    if (this.formTitle.startsWith('添加')) {
                        addTicketGoods(this.formData).then(result => {
                            this.$notify.success("添加成功");
                            this.getTicketGoodss()
                        })
                    } else if (this.formTitle.startsWith('更新')) {
                        updateTicketGoods(this.formData).then(result => {
                            this.$notify.success("更新成功");
                            this.getTicketGoodss()
                        })
                    }
                })
            },
            // 改变状态
            commitStatusChange(value, ticketGoods) {
                this.$confirm(value === false ? '下架商品？' : '上架商品？').then(() => {
                    let obj = {
                        id: ticketGoods.id,
                        sellStatus: ticketGoods.sellStatus
                    }
                    updateTicketGoods(obj).then(() => {
                        this.$notify.success(value === false ? "已下架" : "已上架")
                    }).catch(() => {
                        ticketGoods.sellStatus = !ticketGoods.sellStatus;
                    })
                }).catch(() => {
                    ticketGoods.sellStatus = !ticketGoods.sellStatus;
                })
            },
        }
    }
</script>
